<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <link rel="shortcut icon" href="../../img/favicon.ico">
    <meta name="description" content="Bootstrap Admin App + jQuery">
    <meta name="keywords" content="app, responsive, jquery, bootstrap, dashboard, admin">
    <title>培训演示系统</title>
    <script type="text/javascript" src="../../../webjars/fw-web/main/common/vue-boot.js"></script>
    <link rel="stylesheet" href="./home.css">
</head>
<body>
<div id="main" v-cloak class="main">
    <template>
        <el-container>
            <el-aside :width="sideWidth">
                <div class="el-header-logo" v-bind:class="{ collapse: isCollapse }">
                    <template v-if="isCollapse"><i class="el-icon-s-tools"></i></template>
                    <template v-else><i class="el-icon-s-tools"></i><span style="padding-left: 10px;">培训平台</span></template>
                </div>
                <div class="menu" v-bind:style="{width: sideWidth, height: menuDivHeight}">
                    <el-menu class="el-menu-vertical-main" :collapse="isCollapse">
                        <template v-for="item in menus">
                            <div v-if="item.leaf">
                                <el-menu-item :index="item.id" :key="item.id" @click="menuClick(item, '', '')">
                                    <i v-if='item.icon' :class="'iconfont ' + item.icon"></i>
                                    <span slot="title">{{item.name}}</span>
                                </el-menu-item>
                            </div>
                            <el-submenu v-else :index="item.id" :key="item.id">
                                <template slot="title">
                                    <i v-if='item.icon' :class="'iconfont ' + item.icon"></i>
                                    <span slot="title">{{item.name}}</span>
                                </template>
                                <template v-for="child2 in item.children">
                                    <div v-if="child2.leaf">
                                        <el-menu-item :index="child2.id" :key="child2.id" @click="menuClick(item, child2,'')">
                                            <i v-if='child2.icon' :class="'iconfont ' + child2.icon"></i>
                                            <span slot="title">{{child2.name}}</span>
                                        </el-menu-item>
                                    </div>
                                    <el-submenu v-else :index="child2.id" :key="child2.id">
                                        <template slot="title">
                                            <i v-if='child2.icon' :class="'iconfont ' + child2.icon"></i>
                                            <span slot="title">{{child2.name}}</span>
                                        </template>
                                        <template v-for="child3 in child2.children">
                                            <el-menu-item :index="child3.id" :key="child3.id" @click="menuClick(item, child2, child3)">
                                                <i v-if='child3.icon' :class="'iconfont ' + child3.icon"></i>
                                                <span slot="title"> {{child3.name}}</span>
                                            </el-menu-item>
                                        </template>
                                    </el-submenu>
                                </template>
                            </el-submenu>
                        </template>
                    </el-menu>
                </div>
            </el-aside>
            <el-container v-bind:style="{height: mainDivHeight}">
                <el-header>
                    <div class="el-header-col" v-bind:class="{ collapse: isCollapse }">
                        <i v-if="isCollapse" class="iconfont icon-zhankaianniuicon" @click="isCollapse = false"></i>
                        <i v-else class="iconfont icon-caidan" @click="isCollapse = true"></i>
                    </div>
                    <div class="user-info">{{loginUser.userName}}</div>
                    <div class="splite-line" style="right: 155px;"></div>
                    <el-tooltip effect="light" content="系统通知" placement="bottom">
                        <el-badge :value="20" :max="99" class="item">
                            <i class="el-icon-bell"></i>
                        </el-badge>
                    </el-tooltip>
                    <div class="splite-line" style="right: 85px;"></div>
                    <div class="login-out">
                        <el-tooltip effect="light" content="退出系统" placement="bottom">
                            <el-button type="text" icon="iconfont icon-tuichu1" @click="logout">退出</el-button>
                        </el-tooltip>
                    </div>
                </el-header>
                <el-main style="overflow: hidden;">
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="height: 35px;line-height: 35px;">
                        <template v-for="item in curBreadcrumbs">
                            <el-breadcrumb-item>{{ item }}</el-breadcrumb-item>
                        </template>
                    </el-breadcrumb>
                    <iframe :src="mainPath" v-bind:style="{width: mainWidth, height: mainHeight, border: 0, margin:0, padding:0}"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </template>
</div>
<script type="text/javascript" src="./home.js"></script>
</body>